import React, { Component } from 'react'
import { Card, Button, notification  } from 'antd'
import './index.less'

class Notice extends Component {
    openNotification = (type, direction) => {
        if (direction) {
            notification.config({
                placement: direction,
            })
        }
        notification[type]({
            message: 'React',
            description: 'AntdUI组件是一个好用的UI组件',
        })
    }
    render() {
        return (
            <div>
                <Card title="基本通知" className="card-wrap">
                    <Button type="primary" onClick={() => this.openNotification('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.openNotification('warning')}>warning</Button>
                    <Button type="primary" onClick={() => this.openNotification('info')}>info</Button>
                    <Button type="primary" onClick={() => this.openNotification('error')}>error</Button>
                </Card>

                <Card title="方向通知" className="card-wrap">
                    <Button type="primary"
                        onClick={() => this.openNotification('success', 'topLeft')}>topLeft</Button>
                    <Button type="primary"
                        onClick={() => this.openNotification('warning', 'topRight')}>topRight</Button>
                    <Button type="primary"
                        onClick={() => this.openNotification('info', 'bottomLeft')}>bottomLeft</Button>
                    <Button type="primary"
                        onClick={() => this.openNotification('error', 'bottomRight')}>bottomRight</Button>
                </Card>
            </div>
        )
    }
}

export default Notice